<template>
  <div>
    <el-form ref="loginForm"  :model="loginRuleForm" :rules="loginRules" label-width="0px" class="login-Form">
      <el-form-item class="login-form-item" prop="username">
        <el-input
          placeholder="用户/邮箱"
          prefix-icon="icon iconfont iconuser_name"
          v-model="loginRuleForm.username"
        >
        </el-input>
      </el-form-item>
      <el-form-item class="login-form-item" prop="password">
        <el-input
          placeholder="密码"
          show-password
          prefix-icon="icon iconfont iconpassword"
          v-model="loginRuleForm.password"
          @keyup.enter.native="loginClick('loginForm')"
        >
        </el-input>
      </el-form-item>
      <el-form-item >
        <el-row>
          <el-col :span="24" class="login-btn">
            <el-button type="primary" @click="loginClick('loginForm')">登录</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="bottom-container">
        <el-row>
          <el-col :span="12" :offset="6">
            <el-row>
              <el-col :span="8" :offset="2">没有账号?</el-col>
              <el-col :span="4">
                <el-link type="primary" @click="toRegister">注册</el-link>
              </el-col>
              <el-col :span="1">|</el-col>
              <el-col :span="8">
                <el-link type="primary">忘记密码</el-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>

  import {login} from "network/loginRegister/LoginRequest";
  import * as methods from 'store/methods.const';
  export default {
    components: {},
    data() {

      return {
        loginRuleForm: {
          username: '',
          password: '',
        },
        loginRules:{
          username:[
            {
              required:true,
              message:'请输入用户名',
              trigger:'blur'
            },
            {
              min:3,
              message:'用户名至少3个字符',
              trigger:'blur'
            }
          ],
          password:[
            {
              required:true,
              message:'请输入密码',
              trigger:'blur'
            },
            {
              min:6,
              message:'密码最少6位',
              trigger:'blur'
            }
          ]
        }
      };
    },
    computed: {

    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

      loginClick(formRefName){

        // console.log(this);
        // return;
        this.$refs[formRefName].validate((data)=>{

          if (data !== true){

            return;
          }

          login(this.loginRuleForm).then(data=>{

            // 登录成功
            this.loginSuccess(data);
          });

        });
      },

      loginSuccess(data){
        //保存数据
        sessionStorage.setItem('token',data.token);
        // 跳转到首页
        this.$router.replace('/home');
      },
      resetClick(formRefName){

        this.$refs[formRefName].resetFields();
      },
      toRegister(){

        // 跳转到首页
        this.$router.replace('/register');
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    beforeRouteEnter(to,from,next){

      next();
    }
  }
</script>
<style lang='less' scoped>

  .login-Form{
    position: absolute;
    top:110px;
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
    .login-bottom-btns{

      display: flex;
      justify-content: center;
      .login-btn-reset{

        margin-left: 50px;
      }
    }
    .login-btn{
      .el-button{
        width: 100%;
      }
    }
    .bottom-container{
      height: 35px;
      line-height: 35px;
      margin-top: -10px;
      font-size: 14px !important;
    }
  }
</style>
